<template>
	<div class="mine-shop-list-wrap safe-area-bottom" >
		<van-nav-bar
		  title="审核进度"
		  left-arrow
		  fixed
		  @click-left="onClickLeft"
		/>
		
		
			<div v-if="load && !shopList.length" >
				<van-empty description="暂无商家" />
			</div>
			<!-- @click="handleToInfo(item)" -->
			<div
			v-for="(item, index) in shopList"
			:key="index"
			class="shop-li"
			
			>
				<img class="shop-li-img" :src="item.cover_url" >
				<div class="shop-li-content" >
					<div class="shop-li-content-name" >
						{{ item.name }}
					</div>
					<!-- <div class="shop-li-content-desc" >
						{{ item.region_name }}
					</div> -->
				</div>
				
				<!-- 0:草稿 10:审核中 20:审核失败 30:待进件 31:进件中 
				32:进件失败 33:进件成功 100:已通过 110:已禁用 -->
				<div 
				v-if="item.status === 10"
				class="status-btn doing" >
					审核中
				</div>
				<div 
				v-if="item.status === 30 || item.status === 31 || item.status === 32 || item.status === 33"
				class="status-btn doing" >
					签约中
				</div>
				<div
				v-if="item.status === 20"
				class="status-btn failing" >
					审核失败
				</div>
				<div
				v-if="item.status === 100"
				class="status-btn success" >
					审核通过
				</div>
				
				
			</div>
		
		
		<div @click="handleToShopSettle" class="add-btn active-btn" >添加商家</div>
	</div>
</template>

<script>
	import { ONLINE_SHOP_LIST } from '@/api/mine';
	export default {
		data() {
			return {
				shopList: [],
				load: false
			}
		},
		created() {
			// 门店列表
			this.getShopList();
		},
		methods: {
			onClickLeft() {
				this.$router.back()
			},
			// 门店了列表
			getShopList() {
				this.$http.get(ONLINE_SHOP_LIST)
				.then(res => {
					
					this.shopList = res.data || [];
				})
				.finally(() => {
					setTimeout(() => {
						this.load = true;
					}, 300)
				})
			},
			// 进入门店
			handleToInfo(item) {
				// return
				if(item.status === 100) {
					// 通过时进入详情页面
					this.$router.push({
						name: 'merchantSettleDetail',
						query: {
							id: item.id
						}
					})
					
				}else {
					// 未通过时 - 进入入驻流程
					this.$router.push({
						name: 'merchantSettle',
						query: {
							id: item.id
						}
					})
				}
				
			},
			// 添加门店
			handleToShopSettle() {
				this.$router.push({
					name: 'merchantSettle'
				})
			}
		}
	}
</script>

<style lang="scss" >
	.mine-shop-list-wrap{
		min-height: 100vh;
		padding-top: 58px;
		padding-bottom: calc(1.4rem + constant(safe-area-inset-bottom));
		padding-bottom: calc(1.4rem + env(safe-area-inset-bottom));
		background-color: #f5f5f5;
		box-sizing: border-box;
		.van-nav-bar .van-icon{
			color: #333333;
		}
		.van-nav-bar__arrow{
			font-size: 20px;
		}
		.van-hairline--bottom::after{
		    display: none;
		}
		
		.shop-li{
			position: relative;
			display: flex;
			width: 7.02rem;
			height: 1.84rem;
			padding: 0.24rem 0.32rem 0.24rem 0.2rem;
			margin: auto;
			margin-bottom: 0.16rem;
			border-radius: 0.16rem;
			background: #FFFFFF;
			box-sizing: border-box;
			.status-btn{
				position: absolute;
				right: 0.32rem;
				top: 0;
				bottom: 0;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 0.44rem;
				font-weight: 400;
				font-size: 0.24rem;
				border-radius: 0.04rem;
				&.doing{
					width: 1.04rem;
					color: #FAAD14;
					background-color: #FFFBE6;
					border: 2px solid #FFF1B8;
				}
				&.failing{
					width: 1.28rem;
					color: #F32A23;
					background-color: #FFF2F2;
					border: 2px solid #FF9490;
				}
				&.success{
					width: 1.28rem;
					color: #52C41A;
					background-color: #F6FFED;
					border: 2px solid #D9F7BE;
				}
			}
			.shop-li-img{
				flex-shrink: 0;
				width: 1.36rem;
				height: 1.36rem;
				border-radius: 0.12rem;
			}
			.shop-li-content{
				min-width: 0;
				margin-left: 0.2rem;
				.shop-li-content-name{
					// height: 0.4rem;
					margin-bottom: 0.2rem;
					line-height: 1rem;
					font-weight: 500;
					font-size: 0.28rem;
					color: #333333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
				}
				.shop-li-content-desc{
					width: 3.1rem;
					line-height: 0.36rem;
					font-size: 0.24rem;
					color: #666666;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
		}
		
		.add-btn{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0.24rem;
			bottom: calc(0.24rem + constant(safe-area-inset-bottom));
			bottom: calc(0.24rem + env(safe-area-inset-bottom));
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 6.06rem;
			height: 0.88rem;
			font-size: 0.32rem;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 0.44rem;
			background: linear-gradient( 136deg, #6EC069 0%, #42A633 100%);
		}
	}
</style>
